<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <%- include bootstrap %>
</head>

<body>
    <%- include("header",{title:"register"}) %>

    <div class="cl center-block">
        <div class="col-sm-6 col-xs-6 col-sm-offset-3 col-xs-offset-3" style="margin-top: 50px;">
            <form class="form-horizontal" method="POST" action="/users/register">
                <div class="form-group" style="margin-top: 20px;">
                    <label for="username_input_id" class="col-sm-4 control-label">用户名：</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control username" id="username_input_id" name="username"
                            placeholder="只能字母，数字，下划线，减号组成，4到16位">
                    </div>
                    <span style="color:red;font-size: 12px;padding-left: 15px;" class="col-sm-offset-4 col-xs-offset-4 username_err">
                        <%- result.msg %>
                    </span>
                </div>
                <div class="form-group" style="margin-top: 20px;">
                    <label for="nickname_input_id" class="col-sm-4 control-label">昵称：</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control nickname" id="nickname_input_id" name="nickname"
                            placeholder="只能中英文，数字，下划线，减号组成，4到16位">
                    </div>
                    <span style="color:red;font-size: 12px;padding-left: 15px;" class="col-sm-offset-4 col-xs-offset-4 nickname_err"></span>
                </div>
                <div class="form-group" style="margin-top: 20px;">
                    <label for="pwd_input_id" class="col-sm-4 control-label">密码：</label>
                    <div class="col-sm-7">
                        <input type="password" class="form-control password" id="pwd_input_id" name="password"
                            placeholder="请输入8～20字符，需同时包含英文和数字">
                    </div>
                    <span style="color:red;font-size: 12px;padding-left: 15px;" class="col-sm-offset-4 col-xs-offset-4 password_err"></span>
                </div>
                <div class="form-group" style="margin-top: 20px;">
                    <label for="config_input_id" class="col-sm-4 control-label">确认密码：</label>
                    <div class="col-sm-7">
                        <input type="password" class="form-control config_pwd" id="config_input_id" name="config_pwd"
                            placeholder="确认密码">
                    </div>
                    <span style="color:red;font-size: 12px;padding-left: 15px;" class="col-sm-offset-4 col-xs-offset-4 config_pwd_err"></span>
                </div>
                <div class="form-group" style="margin-top: 20px;">
                    <label for="tel_input_id" class="col-sm-4 control-label">电话号码：</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control usertel" id="tel_input_id" name="usertel" placeholder="电话号码">
                    </div>
                    <span style="color:red;font-size: 12px;padding-left: 15px;" class="col-sm-offset-4 col-xs-offset-4 usertel_err"></span>
                </div>
                <div class="form-group" style="margin-top: 50px;">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="submit" class="btn btn-primary col-sm-offset-1 login-button">注册</button>
                        <button type="reset" class="btn btn-warning col-sm-offset-1">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <%- include("footer") %>
</body>

<script>

    //注册信息验证
    var userNameReg = /^[a-zA-Z0-9_-]{4,16}$/;
    var nicknameReg = /^[\u4e00-\u9fa5A-Za-z0-9-_]{4,16}$/;
    var userPwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
    var userTelReg = /^1[3456789][0-9]{9}$/i;
    var confirmPwdFlag = false;
    var userPwdFlag = false;
    var userTelFlag = false;
    var userNameFlag = false;
    var nicknameFlag = false;

    //用户名失焦事件
    $(".username").blur(function () {
        userNameFlag = checkStrByReg($(".username").val(), userNameReg, "请输入正确的用户名", ".username_err");
        isDisabled();
    });
    //昵称失焦事件
    $(".nickname").blur(function () {
        nicknameFlag = checkStrByReg($(".nickname").val(), nicknameReg, "请输入正确的昵称", ".nickname_err");
        isDisabled();
    });
    //电话号码失焦事件
    $(".usertel").blur(function () {
        userTelFlag = checkStrByReg($(".usertel").val(), userTelReg, "请输入正确的手机号", ".usertel_err");
        isDisabled();
    });
    //密码失焦事件
    $(".password").blur(function () {
        userPwdFlag = checkStrByReg($(".password").val(), userPwdReg, "密码由8～20个字符，需同时包含英文和数字", ".password_err");
        isDisabled();
    });
    //确认密码失焦事件
    $(".config_pwd").blur(function () {
        confirmPwdFlag = checkPwdByReg($(".password").val(), $(".config_pwd").val(), userPwdReg, ".password_err", ".config_pwd_err");
        isDisabled();
    });

    isDisabled();
    function isDisabled() {
        if (!(userPwdFlag && userTelFlag && confirmPwdFlag && userNameFlag && nicknameFlag)) {
            $(".login-button").prop("disabled", true);
        } else {
            $(".login-button").prop("disabled", false);
        }
    }

    //注册按钮点击事件
    // $(".login-button").click(function (e) {
    //     if (userPwdFlag && userTelFlag && confirmPwdFlag && userNameFlag && nicknameFlag) {
    //         // $.ajax({
    //         //     type: "post",
    //         //     url: "/users/register",
    //         //     dataType: "json",
    //         //     success: function (obj) {
    //         //         if (obj["code"] === 1) {
    //         //             location.replace("/login");
    //         //         } else {
    //         //             $(".username_err").html(obj.msg);
    //         //         }
    //         //     }
    //         // });
    //     } else if (!userPwdFlag) {
    //         $(".password_err").html("密码由8～20个字符，需同时包含英文和数字");
    //     } else if (!userTelFlag) {
    //         $(".usertel_err").html("请输入正确的手机号");
    //     } else if (!confirmPwdFlag) {
    //         $(".config_pwd_err").html("密码不一致");
    //     } else if (!userNameFlag) {
    //         $(".username_err").html("请输入正确的用户名");
    //     } else if (!nicknameFlag) {
    //         $(".nickname_err").html("请输入正确的昵称");
    //     }
    // });

    /*
   * 根据传入的正则表达式和字符串进行判断，然后进行相应的操作
   * 返回值为 Boolean
   * */
    function checkStrByReg(str, reg, errStr, objStr) {
        if (reg.test(str)) {
            $(objStr).html("");
            return true;
        } else {
            $(objStr).html(errStr);
            return false;
        }
    }

    /*
     * 根据传入的正则表达式和密码字符串，确认密码字符串进行判断，然后进行相应的操作
     * 返回值为 Boolean
     * （密码强弱判断）
     * （密码是否一致）
     * （密码格式是否正确）
     * */
    function checkPwdByReg(pwd1, pwd2, reg, objStr1, objStr2) {
        if (pwd1 === pwd2) {
            if (reg.test(pwd2)) {
                $(objStr2).html("");
                $(objStr1).html("");
                return true;
            } else {
                $(objStr1).html("密码由8～20个字符，需同时包含英文和数字");
                return false;
            }
        } else {
            $(objStr2).html("密码不一致");
            return false;
        }
    }

</script>

</html>